<template>
  <div>
    <layout>
      <template #workspace>
        <workspace/>
      </template>
      <template #palette>
        <palette/>
      </template>
      <template #sidebar>
        <sidebar/>
      </template>
    </layout>
  </div>
</template>

<script>
import Layout from './components/layout.vue'
import Workspace from './workspace.vue'
import Palette from './palette.vue'
import Sidebar from './sidebar.vue'
import EventBus, { BUS_DEVICE } from '../../libs/EventBus'
import { createNamespacedHelpers } from 'vuex'
import { AppParams } from '@/utils/appParams'
import { setHtmlTheme } from "@/utils";
import { ThemeEnum } from "@/enums/styleEnum";
import { useFlowStore } from "@/store/modules/flow/flowStore";

const { mapActions } = createNamespacedHelpers('NodeParams')
export default {
  name: 'Flow',
  components: {
    Workspace,
    Palette,
    Sidebar,
    Layout
  },
  data () {
    return {
      ComponentDetail: {},
      componentName: null,
      ShowComponentDialog: false,
      ShowDrive: false,
      ShowEvent: false
    }
  },
  methods: {
    ...mapActions({
      updateDriver: 'updateDriver',
      // updatePlcAddress: 'updatePlcAddress'
    }),
    /**
     * 打开设备管理
     */
    openDriveConfigDialog () {
      this.ShowDrive = true
    },
    openEventConfigDialog () {
      this.ShowEvent = true
    },
    onClose () {
      this.ShowDrive = false
      this.ShowEvent = false
    },
    CloseDialog () {
      this.IsShowComponent()
    },
    IsShowComponent (component = null) {
      this.ShowComponentDialog = component !== null
      if (this.ShowComponentDialog) {
        this.ComponentDetail = component || {}
      }
    },
    EditUserPage (component) {
      this.$router.push('/#/project/items')
    }
  },

  mounted () {
    const FlowStore = useFlowStore()
    FlowStore.UpdatePlcAddress();
    EventBus.$on(BUS_DEVICE, this.openDriveConfigDialog)
    EventBus.$on(AppParams.JAVA_SCRIPT_EVENT.EVENT_MANAGE, this.openEventConfigDialog)
    EventBus.$on(AppParams.JAVA_SCRIPT_EVENT.USER_PAGE, this.EditUserPage)
    this.updateDriver()
    // this.updatePlcAddress()
    setHtmlTheme(ThemeEnum.DEFAULT)
  }
}
</script>

<style lang="less">
</style>

<style lang="less" scoped>
/* @import "./styles/index.less";
.flow {
  &-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
} */
</style>
